<template>
  <div class="educational-container">
    <el-tabs v-model="activeName" class="class-tabs">
      <el-tab-pane label="J1 教学任务书" name="1">
        <teachingTaskBook :archivesId="props.archivesId"></teachingTaskBook>
      </el-tab-pane>
      <el-tab-pane label="J2 教师业务档案" name="2">
        <FileUploader ref="FileUploaderRef" v-model="teacherFile" limit="9" dataType="jsonArr" @fatherMethods="saveFile"></FileUploader>
        <div class="bold flex alignCenter">
          <span style="margin-right: 15px;">教师基本情况表</span>
          <el-button v-if="!teacherFile.length" size="small" type="primary" plain @click="proxy.$refs.FileUploaderRef.open()">上传</el-button>
        </div>
        <div v-for="(item, index) in teacherFile" :key="index" class="flex alignCenter" style="margin-top: 10px;">
          <div style="width:300px">
            <div class="button" @click="proxy.$utils.downloadImage(item.path,`${props.info.lecturerName}教师基本情况表`)">{{item.name}}</div>
          </div>
          <el-button type="danger" size="small" icon="Delete" circle @click="delFunc(index,'teacherFile')" />
        </div>

        <el-divider />

        <diplomaFile ref="diplomaFileRef" v-model="diplomaFiles" limit="9" dataType="jsonArr" @fatherMethods="saveDiplomaFile"></diplomaFile>
        <div class="bold flex alignCenter">
          <span style="margin-right: 15px;">教师毕业证</span>
          <el-button v-if="!diplomaFiles.length" size="small" type="primary" plain @click="proxy.$refs.diplomaFileRef.open()">上传</el-button>
        </div>
        <div v-for="(item, index) in diplomaFiles" :key="index" class="flex alignCenter" style="margin-top: 10px;">
          <div style="width:300px">
            <div class="button" @click="proxy.$utils.downloadImage(item.path,`${props.info.lecturerName}教师毕业证`)">{{item.name}}</div>
          </div>
          <el-button type="danger" size="small" icon="Delete" circle @click="delFunc(index,'diplomaFiles')" />
        </div>

        <el-divider />

        <eduFile ref="eduFileRef" v-model="eduAuthFiles" limit="9" dataType="jsonArr" @fatherMethods="saveEduFile"></eduFile>
        <div class="bold flex alignCenter">
          <span style="margin-right: 15px;">学信网认证报告</span>
          <el-button v-if="!eduAuthFiles.length" size="small" type="primary" plain @click="proxy.$refs.eduFileRef.open()">上传</el-button>
        </div>
        <div v-for="(item, index) in eduAuthFiles" :key="index" class="flex alignCenter" style="margin-top: 10px;">
          <div style="width:300px">
            <div class="button" @click="proxy.$utils.downloadImage(item.path,`${props.info.lecturerName}学信网认证报告`)">{{item.name}}</div>
          </div>
          <el-button type="danger" size="small" icon="Delete" circle @click="delFunc(index,'eduAuthFiles')" />
        </div>

        <el-divider />

        <teacherAuthFile ref="teacherAuthFileRef" v-model="teacherAuthFiles" limit="9" dataType="jsonArr" @fatherMethods="saveTeacherAuthFile"></teacherAuthFile>
        <div class="bold flex alignCenter">
          <span style="margin-right: 15px;">教师从业资格证</span>
          <el-button size="small" v-if="!teacherAuthFiles.length" type="primary" plain @click="proxy.$refs.teacherAuthFileRef.open()">上传</el-button>
        </div>
        <div v-for="(item, index) in teacherAuthFiles" :key="index" class="flex alignCenter" style="margin-top: 10px;">
          <div style="width:300px">
            <div class="button" @click="proxy.$utils.downloadImage(item.path,`${props.info.lecturerName}教师从业资格证`)">{{item.name}}</div>
          </div>
          <el-button type="danger" size="small" icon="Delete" circle @click="delFunc(index,'teacherAuthFiles')" />
        </div>

        <el-divider />

        <skillCertificateFile ref="skillCertificateFileRef" v-model="skillCertificateFiles" limit="9" dataType="jsonArr" @fatherMethods="saveSkillFile"></skillCertificateFile>
        <div class="bold flex alignCenter">
          <span style="margin-right: 15px;">职业技能证书</span>
          <el-button v-if="!skillCertificateFiles.length" size="small" type="primary" plain @click="proxy.$refs.skillCertificateFileRef.open()">上传</el-button>
        </div>
        <div v-for="(item, index) in skillCertificateFiles" :key="index" class="flex alignCenter" style="margin-top: 10px;">
          <div style="width:300px">
            <div class="button" @click="proxy.$utils.downloadImage(item.path,`${props.info.lecturerName}职业技能证书`)">{{item.name}}</div>
          </div>
          <el-button type="danger" size="small" icon="Delete" circle @click="delFunc(index,'skillCertificateFiles')" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="J3 考核评价记录" name="3">
        <el-table :data="assessmentRecord" size="small">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="className" label="班级名称" />
          <el-table-column prop="assessedTeacher" label="被考核教师" />
          <el-table-column prop="assessmentEvaluation" label="考核与评价" />
          <el-table-column prop="notes" label="记事" width="150" />
          <el-table-column label="班级老师" width="100">
            <template #default="scope">
              <accountSelect v-model="scope.row.classTeacherId" readonly="1"></accountSelect>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="J4 教师试讲评估表" name="4"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import FileUploader from "@/components/elMain/FileUploader.vue";
import diplomaFile from "@/components/elMain/FileUploader.vue";
import eduFile from "@/components/elMain/FileUploader.vue";
import teacherAuthFile from "@/components/elMain/FileUploader.vue";
import skillCertificateFile from "@/components/elMain/FileUploader.vue";
import teachingTaskBook from "@/views/courseManage/components/teachingTaskBook.vue";
let props = defineProps(["archivesId", "info"]);
const { proxy } = getCurrentInstance();

let activeName = ref("1");
let teacherFile = ref([]);
let assessmentRecord = ref([]); //考核评价表
let diplomaFiles = ref([]); //教师毕业证
let eduAuthFiles = ref([]); //学信网认证报告
let teacherAuthFiles = ref([]); //教师业务档案
let skillCertificateFiles = ref([]); //技能证书

async function getInfo() {
  let resp = await proxy.$apis.teachingArchives({
    type: "details",
    data: { _id: props.archivesId },
  });
  if (resp.file && resp.file.length) teacherFile.value = resp.file;
  if (resp.diplomaFile && resp.diplomaFile.length)
    diplomaFiles.value = resp.diplomaFile;
  if (resp.eduAuthFile && resp.eduAuthFile.length)
    eduAuthFiles.value = resp.eduAuthFile;
  if (resp.teacherAuthFile && resp.teacherAuthFile.length)
    teacherAuthFiles.value = resp.teacherAuthFile;
  if (resp.skillCertificateFile && resp.skillCertificateFile.length) {
    skillCertificateFiles.value = resp.skillCertificateFile;
  }
}

function delFunc(index, type) {
  console.log("删除", index, type);
  switch (type) {
    case "teacherFile":
      teacherFile.value.splice(index, 1);
      saveFile();
      break;
    case "diplomaFiles":
      diplomaFiles.value.splice(index, 1);
      saveDiplomaFile();
      break;
    case "eduAuthFiles":
      eduAuthFiles.value.splice(index, 1);
      saveEduFile();
      break;
    case "teacherAuthFiles":
      teacherAuthFiles.value.splice(index, 1);
      saveTeacherAuthFile();
      break;
    case "skillCertificateFiles":
      skillCertificateFiles.value.splice(index, 1);
      saveSkillFile();
      break;
    default:
      break;
  }
}

//评价记录
async function evaluationRecord() {
  assessmentRecord.value = await proxy.$apis.teachingArchives({
    type: "evaluation-record",
    data: { archivesId: props.archivesId },
  });
  console.log("评价记录", assessmentRecord.value);
}

async function saveFile() {
  await proxy.$apis.teachingArchives({
    type: "update",
    data: {
      _id: props.archivesId,
      file: teacherFile.value,
    },
  });
  proxy.$utils.showToast("保存成功");
  getInfo();
}

//教师毕业证
async function saveDiplomaFile() {
  await proxy.$apis.teachingArchives({
    type: "update",
    data: { _id: props.archivesId, diplomaFile: diplomaFiles.value },
  });
  proxy.$utils.showToast("保存成功");
  getInfo();
}

//学信网认证报告
async function saveEduFile() {
  await proxy.$apis.teachingArchives({
    type: "update",
    data: { _id: props.archivesId, eduAuthFile: eduAuthFiles.value },
  });
  proxy.$utils.showToast("保存成功");
  getInfo();
}

//教师资格证
async function saveTeacherAuthFile() {
  await proxy.$apis.teachingArchives({
    type: "update",
    data: { _id: props.archivesId, teacherAuthFile: teacherAuthFiles.value },
  });
  proxy.$utils.showToast("保存成功");
  getInfo();
}

//技能证书
async function saveSkillFile() {
  await proxy.$apis.teachingArchives({
    type: "update",
    data: {
      _id: props.archivesId,
      skillCertificateFile: skillCertificateFiles.value,
    },
  });
  proxy.$utils.showToast("保存成功");
  getInfo();
}

watch(
  () => props.archivesId,
  (newValue, oldValue) => {
    if (newValue) {
      getInfo();
      evaluationRecord();
    }
  },
  { immediate: true, deep: true }
);
</script>



<style lang="scss" scoped>
span {
  width: 150px;
}
</style>

